<!-- 我的课程-课程详情 -->
<template>
	<view v-if="Object.keys(detailInfo).length>0" class="my-course-detail page-background">
		<!-- <view class="status-area">
			<view class="status">
				{{detailInfo.classStateStr}}
			</view>
			<view class="tips">
				{{matchTips}}
			</view>
			<view v-if="detailInfo.classType!='2'" class="appoint-numbers">
				<text class="ready-number">{{detailInfo.useCount}}</text><text class="center-line">/</text>{{detailInfo.totalCount}}
			</view>
		</view> -->
		<view class="course-item item-box">
			<view @click="to('/mainProcess/club/detail/detail?id='+detailInfo.clubId)" class="top-row flex-box">
				<view class="left flex-box">
					<image class="club-icon" :src="'@/static/images/icon-vipcard-club.png'|addBaseImgUrl" mode="">
					</image>
					<view class="club-name">
						{{detailInfo.clubName}}
					</view>
					<van-icon name="arrow" size="12px" color="#CCCCCC" />
				</view>
			</view>
			<view @click="to('/course/detail/detail?id='+detailInfo.classId)" class="course-info flex-box">
				<view class="left">
					<image :src="detailInfo.coachIcon||detailInfo.classImgUrl" mode=""></image>
				</view>
				<view class="right">
					<view class="title-price flex-box">
						<view class="course-title line-clamp-2">
							{{detailInfo.className}}
						</view>
						<view v-if="detailInfo.cost" class="course-price">
							￥<text>{{detailInfo.cost|floorTwo}}</text>
						</view>
					</view>
					<view class="venue">
						{{detailInfo.placeName}}
					</view>
					<view class="tags flex-box">
						<view class="lit-tag">
							{{detailInfo.classTypeValue}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="player-item item-box">
			<view class="item-top">
				<view class="left">
					<image v-if="detailInfo.playerIcon" class="icon" :src="detailInfo.playerIcon" mode=""></image>
          <template v-else>
            <image v-if="detailInfo.sex==2" class="icon" :src="'@/static/images/mine/player-icon-gril-grey.png'|addBaseImgUrl" mode="">
            </image>
            <image v-else class="icon" :src="'@/static/images/mine/player-icon-boy-grey.png'|addBaseImgUrl" mode=""></image>
          </template>
					<image v-if="detailInfo.sex=='1'" class="icon-sex"
						:src="'@/static/images/mine/icon-sex-boy.png'|addBaseImgUrl" mode=""></image>
					<image v-else class="icon-sex" :src="'@/static/images/mine/icon-sex-gril.png'|addBaseImgUrl"
						mode=""></image>
				</view>
				<view class="right">
					<view class="title-row flex-box">
						<text class="player-name">{{detailInfo.relName}}</text>
						<view class="player-tag yellow">
							{{detailInfo.typeValue}}
						</view>
						<view v-if="detailInfo.skillLevel" class="player-tag orange">
							{{'级别L'+detailInfo.skillLevel}}
						</view>
					</view>
					<view class="content-row">
						手机：{{detailInfo.emergencyContact||''}}
					</view>
					<view class="content-row">
						出生日期：{{detailInfo.birthday}}
					</view>
				</view>
				<view v-if="appointPlayerData.list.length>1" @click="toChangePlayer" class="change-player">
					<text>切换球员</text>
					<van-icon name="arrow" size="12px" color="#999999" />
				</view>
			</view>
			<view class="item-bottom">
				<image class="icon-image" :src="'@/static/images/icon-calendar.png'|addBaseImgUrl" mode=""></image>
				<view class="course-record">
					<view class="record-item">
						<view class="record-left">
							<view v-if="['0','1'].includes(detailInfo.classType)" class="record-left">
								<text>{{`${detailInfo.useCount}/${detailInfo.hourType==1?'不限':detailInfo.totalCount}课时`}}</text>
								<text v-if="detailInfo.endDate">{{`有效期至${detailInfo.endDate.substr(0,10)}`}}</text>
							</view>
							<view v-else-if="detailInfo.classStart&&detailInfo.classEnd" class="record-left">
								<text
									v-if="detailInfo.classState==1">{{`有效期：${detailInfo.classStart.substr(0,10)}至${detailInfo.classEnd.substr(0,10)}`}}</text>
								<text v-else>{{`有效期至${detailInfo.classEnd.substr(0,10)}`}}</text>
							</view>
						</view>
						<view class="record-right">
							{{detailInfo.classStateStr}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="detailInfo.classType&&['0','1'].includes(detailInfo.classType)" class="appoint-module">
			<view class="appoint-tabs">
				<view @click="tabClick(1)" :class="appointTabIndex==1?'tab-item checked':'tab-item'">
					约课
				</view>
				<view @click="tabClick(2)" :class="appointTabIndex==2?'tab-item checked':'tab-item'">
					约课记录
				</view>
				<view @click="toAppointSet" class="appoint-set">
					<text>约课设置</text>
					<van-icon name="arrow" size="12px" color="#999999" />
				</view>
			</view>
			<view v-show="appointTabIndex==1" class="appoint-view item-box">
				<view class="calendar">
					<!-- 日历 -->
					<uni-calendar ref="calen" :lunar="false" :selected="uniCalSelArr" @change="calendarClick">
					</uni-calendar>
				</view>
				<view class="time-area">
					<view class="label">
						<text>预约时段</text>
						<text v-if="detailData.cancelHours>0"
							class="tip">{{`课程开始前${detailData.cancelHours}小时不能取消预约`}}</text>
					</view>
					<view v-if="timelist.length>0" class="time-list">
						<view v-for="(item, index) in timelist" :key="index" class="time-item flex-box">
							<view class="left">
								<view :class="item.state>0?'title red':'title'">
									<text>{{item.startTime.slice(0, 5)+'-'+item.endTime.slice(0, 5)}}</text>
									<van-icon @click="showTips" v-if="item.state>0" name="../../../../static/images/icon-tips-red.png" size="16px" />
								</view>
								<view class="content">
									已约<text><text class="appoint-num">{{item.resCount}}</text><text
											class="total-num">/{{item.numbers}}</text></text>人
								</view>
							</view>
							<view class="right">
								<view v-if="settime(clickdate+' '+item.endTime)&&!item.isCheck&&detailInfo.orderStatus!=4" @click="appoint(item,2)" class="btn sure">
									补约
								</view>
								<view @click="cancelAppoint(item,1)" v-else-if="!settime(clickdate+' '+item.endTime)&&item.isCheck" class="btn cancel">
									取消预约
								</view>
								<view v-else-if="item.resCount >= item.numbers" class="btn red">
									已约满
								</view>
								<view v-else-if="!settime(clickdate+' '+item.endTime)&&detailInfo.orderStatus!=4" @click="appoint(item,1)" class="btn sure">
									预约
								</view>
								<!-- 已过期或课程报名已取消 -->
								<!-- <view v-else-if="detailInfo.status==8" class="btn cancel">
									预约
								</view> -->
							</view>
							<image v-if="item.isCheck" :src="'@/static/images/icon-appointed.png'|addBaseImgUrl"
								class="checked" mode=""></image>
						</view>
					</view>
					<xjx-nodata marginTop="20px" v-if="slotsLoaded&&timelist.length==0" />
				</view>
			</view>
			<view v-show="appointTabIndex==2" class="appoint-view appoint-item item-box">
				<view v-for="(item,index) in appointList" :key="index" class="list-item">
					<view class="main-info flex-box">
						<view class="info-left">
							<image class="gold-icon" :src="'@/static/images/icon_huangguan.png'|addBaseImgUrl" mode="">
							</image>
							<image v-if="item.coachIcon" class="coach-icon" :src="item.coachIcon" mode=""></image>
							<image v-else class="coach-icon" :src="'@/static/images/image-default.png'|addBaseImgUrl"
								mode=""></image>
						</view>
						<view class="info-right">
							<view class="title-row flex-box">
								<view class="coach-name">
									{{item.coachName||''}}
								</view>
								<view class="appoint-status">
									{{item.status=='8'?'已取消':item.stateStr}}
								</view>
							</view>
							<view class="content-row">
								预约日期：{{item.startTime?(item.startTime.split(' ')[0].replace('-','年').replace('-','月')+'日'):''}}
							</view>
							<view class="content-row">
								预约时段：<text :class="item.slotState>0?'red':''">{{item.startTime&&item.endTime?(item.startTime.split(' ')[1].substr(0,5)+'-'+item.endTime.split(' ')[1].substr(0,5)):''}}</text>
								<van-icon @click="showTips" v-if="item.slotState>0" name="../../../../static/images/icon-tips-red.png" size="16px" />
							</view>
							<view @click="cancelAppoint(item,2)" v-if="item.state=='0'&&item.status=='0'"
								class="btn cancel">
								取消预约
							</view>
							<view @click="toEvaluate(item,3)" v-if="item.status=='6'&&item.isPraise=='0'" class="btn">
								评价
							</view>
							<view @click="toEvaluateDetail(item)" v-if="item.status=='6'&&item.isPraise=='1'"
								class="btn cancel">
								评价详情
							</view>
						</view>
					</view>
				</view>
				<xjx-nodata marginTop="60px" v-if="pageLoaded&&appointList.length==0"></xjx-nodata>
			</view>
		</view>
		<!-- 长期课 -->
		<view v-if="detailInfo.classState==2&&['0','1'].includes(detailInfo.classType)&&detailInfo.isPraised==0&&(detailInfo.status=='0'||detailInfo.status=='6')"
			class="fixed-bottom">
			<view @click="toEvaluate(detailInfo,2)" class="appoint-btn">
				评价
			</view>
		</view>
		<!-- 短期课 -->
		<view v-else-if="detailInfo.classState==2&&detailInfo.isPraised==0&&(detailInfo.status=='0'||detailInfo.status=='6')" class="fixed-bottom">
			<view @click="toEvaluate(detailInfo,1)" class="appoint-btn">
				评价
			</view>
		</view>
		<!-- 弹出框 -->
		<van-dialog id="van-dialog" confirm-button-color="#2E87FF" cancel-button-color="#2E87FF" />
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	import Dialog from '@/wxcomponents/vant/dist/dialog/dialog';
	import Toast from "@/wxcomponents/vant/dist/toast/toast";
	import {
		dateUtils,
		rili,
		messageAuth
	} from '@/common/js/util.js'
	export default {
		data() {
			return {
				detailInfo: {},
				appointList: [],
				list: [],
				appointTabIndex: 1,
				pageLoaded: false,
				slotsLoaded: false,
				loadingShow: true,
				detailid: '',
				detailtype: '', //订单长期短期
				liebiaodata: [], //长课列表数据
				shorttime: '', //短期课时间
				shortdate: [], //短期课时间段
				radioonoff: true, //是否限购对号
				uniCalSelArr: [], //日历橙色点
				jlbdata: {
					serviceContent: ''
				}, //俱乐部信息
				detailData: {}, //
				jiaoliandata: {}, //教练信息
				timelist: [], //时间段
				jintian: '',
				clickdate: '', //点击的日期
				clickWeek: '', //点击的week(周几)
				classId: '', //课程报名ID
				calendarCheckedDate: '',
				backFromEvalute: 0,
				designedFullDate: '',
				resetCheckedIndexOnLoad: false,
				defaultCheckedId: '123'
			};
		},
		onLoad(data) {
			this.id = data.id || ''
			this.orderId = data.orderId
			if (this.appointPlayerData.checkedIndex > 0) {
				this.resetCheckedIndexOnLoad = true
				this.appointPlayerData.checkedIndex = 0
			}
			if (!this.accessToken) {
				// uni.navigateTo({
				// 	url: '/activity/detail/detail?id='+this.id
				// })
				let url = `/personalCenter/myCourse/detail/detail?id=${data.id}`
				if (data.startTime) {
					url += `&startTime=${data.startTime}`
				}
				uni.setStorageSync('loginToPage', url)
				uni.showToast({
					title: '请先登录~',
					icon: 'none'
				})
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/personalCenter/index/index'
					})
				}, 2000)
				return false
			}
			if (data.startTime) {
				let fulldate = data.startTime.substr(0, 10)
				let date = new Date(fulldate.replace(/-/g, '/'))
				// let week = date.getDay()
				// this.clickdate = fulldate
				// this.calendarCheckedDate = fulldate
				// this.clickWeek = week
				this.designedFullDate = fulldate
			}
			this.init()
		},
		onShow() {
			if (this.backFromEvalute == 2) {
				this.backFromEvalute = 0
				// 短期课评价或长期课评价俱乐部返回时重新拉取数据
				this.init()
			} else if (this.backFromEvalute == 1) {
				this.backFromEvalute = 0
				// 处理预约记录评价状态
				this.queryAppointList(this.detailInfo.classId, this.detailInfo.id)
			}
		},
		onUnload(){
			return false
		},
		computed: {
			...mapState(['userInfo', 'accessToken', 'appointPlayerData']),
			matchTips() {
				if (this.detailInfo.classType == '2') {
					return ''
				}
				if (this.detailInfo.classState == 0) {
					return '请耐心等待哟～'
				} else if (this.detailInfo.classState == 1) {
					if (this.detailInfo.useCount < this.detailInfo.totalCount) {
						return '继续约课吧～'
					} else {
						return ''
					}
				} else {
					return '快去给你的教练进行评价～'
				}
			}
		},
		methods: {
			...mapMutations(['setStateAttr']),
			async init() {
				const param = {
					'ACCESS-TOKEN': this.accessToken,
					pageSize: 9999,
					pageNo: 1,
					classId: this.id
				}
				const res = await this.$api.queryClassEnterList(param)
				this.pageLoaded = true
				if (res && res.code == 200) {
					if (res.data.list && res.data.list.length == 0) {
						uni.redirectTo({
							url: '/course/detail/detail?id=' + this.id
						})
						return false
					}
					// this.list = res.data.list
					if(this.orderId){
						let mIndex = 0
						res.data.list.forEach((item,index)=>{
							if(item.orderId==this.orderId){
								mIndex = index
							}
						})
						this.orderId = ''
						// this.appointPlayerData = {
						// 	list: res.data.list,
						// 	checkedIndex: mIndex
						// }
						this.setStateAttr([
						  {
						    key: 'appointPlayerData',
						    val: {
											list: res.data.list,
											checkedIndex: mIndex
										}
						  }
						]);
						return false
					}
					this.appointPlayerData.list = res.data.list
				}
			},
			showTips(){
				let tipsContent = '1.俱乐部调整了该课程，请联系俱乐部确认课程变动信息是否会影响您已约课程。\n2.您可在该课程开始前取消预约，若无法取消，请联系俱乐部。'
				Dialog.alert({
					message: tipsContent,
					confirmButtonText: '知道啦',
					width: '325px',
					messageAlign: 'left',
					customStyle: 'border-radius:7.5px;',
					className: 'my-dialog-confirm'
				})
				.then(() => {
					// on confirm
				})
				.catch(() => {
					// on cancel
			
				})
			},
			tabClick(index) {
				this.appointTabIndex = index
			},
			toAppointSet(){
				uni.navigateTo({
					url: `/personalCenter/myCourse/autoAppoint/autoAppoint?classId=${this.id}&classEnterId=${this.detailid}`
				})
			},
			toChangePlayer() {
				uni.navigateTo({
					url: '/personalCenter/myCourse/changePlayer/changePlayer?index=0'
				})
			},
			// 查询约课记录
			async queryAppointList(classId, classEnterId) {
				const param = {
					'ACCESS-TOKEN': this.accessToken,
					pageSize: 1000,
					pageNo: 1,
					classId: classId,
					classEnterId: classEnterId
				}
				const res = await this.$api.queryReservationClass(param)
				if (res && res.code == 200) {
					this.appointList = res.data.list
				}
			},
			toEvaluate(item, type) {
				if (type == 1) { // 短期课评价（俱乐部和教练）
					if (this.detailInfo.orderId) {
						this.backFromEvalute = 2
						uni.navigateTo({
							url: `/mainProcess/evaluate/index/index?type=1&state=2&orderId=${this.detailInfo.orderId}`
						})
					}
				} else if (type == 2) { // 长期课俱乐部评价
					if (item.orderId) {
						this.backFromEvalute = 2
						uni.navigateTo({
							url: `/mainProcess/evaluate/index/index?type=2&state=2&orderId=${this.detailInfo.orderId}`
						})
					}
				} else { // 教练评价
					if (this.detailInfo.orderId && item.id) {
						this.backFromEvalute = 1
						uni.navigateTo({
							url: `/mainProcess/evaluate/index/index?type=3&state=2&orderId=${this.detailInfo.orderId}&timetableId=${item.id}`
						})
					}
				}
			},
			toEvaluateDetail(item) {
				if (this.detailInfo.orderId) {
					uni.navigateTo({
						url: `/mainProcess/evaluate/index/index?type=3&state=1&orderId=${this.detailInfo.orderId}&timetableId=${item.id}`
					})
				}
			},
			toAppoint() {
				if (this.detailInfo.id && this.detailInfo.classId) {
					uni.navigateTo({
						url: `/personalCenter/myCourse/appoint/appoint?id=${this.detailInfo.id}&classId=${this.detailInfo.classId}`
					})
				}
			},
			to(url) {
				uni.navigateTo({
					url: url
				})
			},
			getDetail() {
				// 获取详情
				this.$api.getClassDetailById({
					'ACCESS-TOKEN': this.accessToken,
				}, this.classId).then((res) => {
					if (res && res.code == '200' && res.data) {
						this.firstGetDetail = false
						this.detailtype = res.data.type;
						this.detailData = res.data;
						let start = res.data.classStart.split(' ')[0].replace(/-/g, "/")
						let end = res.data.classEnd.split(' ')[0].replace(/-/g, "/")
						this.shorttime = start + '-' + end;
						this.radioonoff = res.data.isLimit == '1' ? true : false;
						if (res.data.type == '2') {
							//短期课
							let arr = [];
							res.data.spClassSlots.map((item) => {
								arr.push(item.startTime.slice(0, 5) + '-' + item.endTime.slice(0, 5))
							})
							this.shortdate = arr;
							this.uniCalSelArr = rili.shortdate(this.detailData.classStart.split(' ')[0], this
								.detailData.classEnd.split(' ')[0], this.detailData.exception)
						} else {
							let nowDate = new Date()
							//长期课
							let datas = rili.jktolb(res.data.spClassSlots);
							let num = 0;
							for (var i = 0; i < datas.length; i++) {
								if (datas[i].time.length > num) {
									num = datas[i].time.length
								}
							}
							for (var j = 0; j < datas.length; j++) {
								datas[j].time.length = num
							}
							this.liebiaodata = datas;
							let keshiEndTime = new Date(this.detailInfo.endDate).getTime()
							let lastTime = nowDate.getTime() + (1000 * 60 * 60 * 24 * 30)
							let lastDate = new Date(lastTime)
							let lastFullDate = lastDate.getFullYear() + '-' + (lastDate.getMonth() + 1) + '-' +
								lastDate.getDate()
							let classStartTime = new Date(res.data.classStart.replace(/-/g, '/')).getTime()
							// let classEndDate = classEndTime>lastTime?lastFullDate:res.data.classEnd
							let classEndDate = ''
							if (lastTime > keshiEndTime) {
								classEndDate = this.detailInfo.endDate.substr(0, 10)
							} else {
								classEndDate = lastFullDate
							}
							let classStartDate = res.data.classStart.substr(0,10)
							this.uniCalSelArr = rili.courseCalendarInit(classStartDate, classEndDate, this
								.liebiaodata, res.data, '')
							this.jintian = dateUtils.stampFormat(Date.parse(nowDate));
							// let week = nowDate.getDay();
							// let e={
							// 	fulldate:this.clickdate||this.jintian,
							// 	lunar:{nWeek:this.clickWeek!==''?this.clickWeek:week},
							// }
							// this.calendarClick(e,true)
							if (this.designedFullDate) {
								this.$refs.calen.zhudongClick(this.designedFullDate)
								this.designedFullDate = ''
							} else {
								this.$refs.calen.zhudongClick(this.clickdate || this.jintian)
							}
						}
					}
				})
			},
			//点击日期
			calendarClick(e, load) {
				/**
				 * load: 是否为自动调用
				 * */
				if (!e.extraInfo.zhudong && e.fulldate == this.clickdate) {
					return false
				} else {
					this.clickdate = e.fulldate;
					this.clickWeek = e.lunar.nWeek;
					let flag = false
					this.uniCalSelArr.map((item, index) => {
						if (item.date.includes(e.fulldate)) {
							this.getClassSolt(e.fulldate, e.lunar.nWeek)
							flag = true
							return;
						}
					})
					if (!flag) {
						this.timelist = [];
						if (!this.slotsLoaded) {
							this.slotsLoaded = true
						}
					}
				}
			},
			getClassSolt(date, week) {
				//获取课程时段列表
				let data = {
					'ACCESS-TOKEN': this.accessToken,
					classDate: date,
					classId: this.classId,
					classEnterId: this.detailid,
					userId: '',
					week: week,
				}
				this.slotsLoaded = false
				this.$api.getClassSolt(data).then(res => {
					if (res && res.code == '200') {
						this.timelist = res.data;
					}
					// let timer = setTimeout(()=>{
					// 	clearTimeout(timer)
					// 	this.slotsLoaded = true
					// },1000)
				})
			},
			settime(time) {
				if (rili.zhuannums() > rili.zhuannums(time)) {
					return true;
				} else {
					return false;
				}
			},
			cancelAppoint(obj, type) {
				let hours = this.detailData.cancelHours
				let currentTime = new Date().getTime()
				let slotTime = ''
				if (type == 1 && obj.spClassTimetable) {
					slotTime = new Date(obj.spClassTimetable.startTime.replace(/-/g, '/')).getTime()
				} else if (type == 2) {
					slotTime = new Date(obj.startTime.replace(/-/g, '/')).getTime()
				}
				
				if (hours > 0 && currentTime + (1000 * 60 * 60 * hours) > slotTime && obj.state=='0') {
					uni.showToast({
						title: `课程开始前${hours}小时不能取消预约`,
						icon: 'none',
						duration: 3000
					})
					return false
				}
				let tipsContent = ''
				if((obj.state=='0'&&type==1)||(obj.slotState=='0'&&type==2)){
					tipsContent = '确认取消预约信息？'
				}else{
					tipsContent = '所选课程时间已被俱乐部修改，取消预约后，该时段将不可再预约，确认取消预约？'
				}
				Dialog.confirm({
						message: tipsContent,
						cancelButtonText: '取消',
						width: '325px',
						// messageAlign: 'left',
						customStyle: 'border-radius:7.5px;',
						className: 'my-dialog-confirm'
					})
					.then(() => {
						// on confirm
						if (type == 1 && obj.spClassTimetable && obj.spClassTimetable.id) {
							this.cancelAppointSure(obj.spClassTimetable.id, this.detailid)
						}
						if (type == 2) {
							this.cancelAppointSure(obj.id, obj.classEnterId)
						}
					})
					.catch(() => {
						// on cancel

					})
			},
			async cancelAppointSure(id) {
				const param = {
					'ACCESS-TOKEN': this.accessToken,
					id: id,
					classEnterId: this.detailid
				}
				const res = await this.$api.cancelReservationClass(param)
				if (res && res.code == 200) {
					uni.showToast({
						title: '取消成功',
						icon: 'none'
					})
					this.init()
					//处理预约时段预约状态
					// this.timelist.filter(v=>{
					// 	if(v.spClassTimetable&&v.spClassTimetable.id == res.data.id){
					// 		v.isCheck = 0;
					// 		v.resCount = v.resCount-1;
					// 		v.spClassTimetable = null
					// 	}
					// })
					// 处理预约记录预约状态
					// this.queryAppointList(this.detailInfo.classId,this.detailInfo.id)
				} else {
					Toast({
					  message: res.message,
					  duration: 3000
					})
				}
			},
			appoint(item,type) {
				const _this = this
				let tipsContent = ''
				let arr = this.timelist.filter((obj)=>{return obj.isCheck==1&&obj.id==item.id})
				if(arr.length>0){ // 验证当前时段是否为修改后且旧时段有预约记录
					tipsContent = `所选课程时间与您已约课程${arr[0].startTime.substr(0,5)}-${arr[0].endTime.substr(0,5)}系统冲突，请先取消预约该课程后再进行预约哦！`
					Dialog.alert({
						message: tipsContent,
						width: '325px',
						confirmButtonText: '知道啦',
						messageAlign: 'left',
						customStyle: 'border-radius:7.5px;',
						className: 'my-dialog-confirm'
					})
					.then(() => {
						// on confirm
					})
					.catch(() => {
						// on cancel
					
					})
					return false
				}
				if(type==1){
					tipsContent = `确认预约 ${_this.clickdate}  ${item.startTime.substr(0,5)}-${item.endTime.substr(0,5)} 吗？`
				}else{ // 补约
					tipsContent = `所选课程已结束，补约后系统将自动为您销课。补约的课程不能取消预约，确认补约吗？`
				}
				Dialog.confirm({
					message: tipsContent,
					cancelButtonText: '取消',
					width: '325px',
					// messageAlign: 'left',
					customStyle: 'border-radius:7.5px;',
					className: 'my-dialog-confirm'
				})
				.then(() => {
					// on confirm
					_this.appointSure(item.id)
				})
				.catch(() => {
					// on cancel

				})
			},
			appointSure(timeId) {
				//约课
				let data = {
					'ACCESS-TOKEN': this.accessToken,
					classDate: this.clickdate,
					classEnterId: this.detailid,
					classId: this.classId,
					classSlotId: timeId,
					clubId: this.detailData.clubId
				}
				this.$api.createReservationClass(data).then(res => {
					if (res && res.code == '200') {
						this.init()
						//处理预约时段预约状态
						// this.timelist.filter(v=>{
						// 	if(v.id == timeId){
						// 		v.isCheck = 1;
						// 		v.resCount += 1;
						// 		v.spClassTimetable = res.data
						// 		if(v.resCount == v.numbers){
						// 			v.isFull = '1'
						// 		}
						// 	}
						// })
						// 处理预约记录预约状态
						// this.queryAppointList(this.detailInfo.classId,this.detailInfo.id)
						uni.showToast({
							title: '您已预约成功！',
							icon: 'none'
						})
						messageAuth.requestAuth('APPOINT_SUCCESS')
					} else {
						Toast({
						  message:res.message,
						  duration: 3000
						});
					}
				})
			}
		},
		watch: {
			appointPlayerData: {
				handler(newValue, oldValue) {
					if (this.resetCheckedIndexOnLoad) {
						this.resetCheckedIndexOnLoad = false
						return false
					}
					this.detailInfo = newValue.list[newValue.checkedIndex]
					if (['0', '1'].includes(this.detailInfo.classType)) {
						this.queryAppointList(this.detailInfo.classId, this.detailInfo.id)
						this.classId = this.detailInfo.classId
						this.detailid = this.detailInfo.id
						this.getDetail()
					}
				},
				// immediate: true,
				deep: true
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-course-detail {
		min-height: 100vh;
		padding-bottom: 130rpx;
		overflow: hidden;

		.status-area {
			position: relative;
			height: 130rpx;
			background-color: $public-color-blue1;
			padding: 20rpx;

			.status {
				color: white;
				font-size: 36rpx;
			}

			.tips {
				font-size: 26rpx;
				color: #8CBCFC;
			}

			.appoint-numbers {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				color: white;
				font-size: 24rpx;

				.ready-number {
					font-size: 60rpx;
				}

				.center-line {
					margin: 0 10rpx;
				}
			}
		}

		.player-item {
			padding: 0 20rpx;

			.item-top {
				padding: 30rpx 0;
				display: flex;
				align-items: flex-start;
				justify-content: flex-start;
				position: relative;

				.left {
					width: 110rpx;
					height: 110rpx;
					position: relative;
					margin-right: 20rpx;
					background-color: #F2F2F2;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
						vertical-align: middle;
					}

					.icon {
						border-radius: 50%;
					}

					.icon-sex {
						position: absolute;
						right: 0;
						top: 0;
						width: 30rpx;
						height: 30rpx;
					}
				}

				.right {
					.title-row {
						justify-content: flex-start;
						align-items: center;

						.player-name {
							font-size: 34rpx;
							margin-right: 10rpx;
						}

						.player-tag {
							font-size: 22rpx;
							height: 32rpx;
							line-height: 32rpx;
							-webkit-border-radius: 5rpx;
							border-radius: 5rpx;
							text-align: center;
							margin-right: 10rpx;
							padding: 0 10rpx;

							&.yellow {
								border: 2rpx solid #FFE1A2;
								color: $bg-color-yellow1;
							}

							&.orange {
								border: 2rpx solid #FFC8C3;
								color: #E14806;
							}
						}
					}

					.content-row {
						font-size: 26rpx;
						color: $text-color-grey;
						margin-top: 5rpx;
					}
				}

				.change-player {
					position: absolute;
					right: 0;
					top: 50%;
					display: flex;
					width: 200rpx;
					justify-content: flex-end;
					height: 150rpx;
					margin-top: -75rpx;
					align-items: center;

					text {
						margin-right: 15rpx;
						color: #333;
						font-size: 26rpx;
					}
				}
			}

			.item-bottom {
				border-top: 2rpx solid #E9E9E9;
				position: relative;
				height: 80rpx;

				.icon-image {
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					top: 50%;
					left: 30rpx;
					margin-top: -24rpx;
				}

				.course-record {
					height: 100%;
					padding: 0 10rpx 0 130rpx;

					.record-item {
						height: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						&+.record-item {
							margin-top: 10rpx;
						}

						view {
							font-size: 26rpx;
							color: #999999;
						}

						.record-left {
							text {
								margin-right: 20rpx;
							}
						}
					}
				}
			}
		}

		.course-item {
			// min-height: 280rpx;
			box-sizing: border-box;
			padding: 30rpx 20rpx;

			.top-row {
				height: 30rpx;

				.left {
					align-items: center;

					.club-icon {
						width: 32rpx;
						height: 32rpx;
					}

					.club-name {
						font-size: 26rpx;
						line-height: 30rpx;
						margin: 0 10rpx 0 15rpx;
						color: #999999;
					}
				}

				.right {
					color: #FDB42E;
					font-size: 26rpx;
					line-height: 30rpx;
				}
			}

			.course-info {
				margin-top: 30rpx;
				align-items: stretch;

				.left {
					width: 126rpx;
					height: 126rpx;
					margin-right: 20rpx;
					flex: 0 0 auto;
					background-color: #F2F2F2;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
						vertical-align: middle;
						border-radius: 50%;
					}
				}

				.right {
					flex: 1 0 auto;
					display: flex;
					flex-flow: column;
					justify-content: flex-start;

					.title-price {
						align-items: flex-start;

						.course-title {
							line-height: 38rpx;
							max-width: 360rpx;
						}

						.course-price {
							font-size: 24rpx;
							line-height: 38rpx;

							text {
								font-size: 30rpx;
							}
						}
					}

					.venue {
						font-size: 24rpx;
						color: $text-color-grey;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						margin-top: 6rpx;
						max-width: 540rpx;
					}

					.tags {
						justify-content: flex-start;
						margin-top: 6rpx;
					}
				}
			}

			.btn-row {
				margin-top: 30rpx;
				display: flex;
				justify-content: flex-end;

				.btn-appoint {
					width: 245rpx;
					height: 72rpx;
					background: rgba(46, 135, 255, 0);
					border: 2rpx solid $public-color-blue1;
					color: $public-color-blue1;
					line-height: 68rpx;
					text-align: center;
					border-radius: 36px;
				}
			}
		}

		.appoint-module {
			.appoint-tabs {
				display: flex;
				justify-content: flex-start;
				align-items: stretch;
				height: 90rpx;
				overflow: hidden;
				padding: 0 10rpx;
				position: relative;

				.tab-item {
					position: relative;
					color: #999999;
					display: flex;
					align-items: center;
					margin-left: 55rpx;
					font-size: 28rpx;
					&+.tab-item {
						margin-left: 110rpx;
					}

					&.checked {
						color: $bg-color-blue1;

						&:after {
							content: '';
							position: absolute;
							bottom: 0;
							height: 4rpx;
							width: 60rpx;
							background-color: $bg-color-blue1;
							left: 50%;
							margin-left: -30rpx;
						}
					}
				}
				
				.appoint-set{
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					align-items: center;
					height: 100%;
					text{
						margin-right: 15rpx;
						color: #333;
						font-size: 26rpx;
					}
				}
			}

			.appoint-view {
				overflow: hidden;
				margin-top: 0 !important;

				.time-area {
					margin-top: 20rpx;
					padding: 20rpx;
					border-top: 2rpx solid #E9E9E9;

					.label {
						text {
							font-size: 32rpx;

							&.tip {
								color: #999;
								font-size: 24rpx;
								margin-left: 10rpx;
							}
						}
					}

					.time-list {
						overflow: hidden;

						// min-height: 340rpx;
						.time-item {
							align-items: center;
							padding: 0 0 0 10rpx;
							position: relative;
							height: 170rpx;
							overflow: hidden;

							.left {
								display: flex;
								flex-flow: column;
								justify-content: center;
								z-index: 1;

								.title {
									font-size: 36rpx;
									margin-bottom: 10rpx;
									display: flex;
									align-items: center;
									text{
										margin-right: 10rpx;
									}
									&.red{
										color: #FF0000;
									}
								}

								.content {
									font-size: 24rpx;
									color: $text-color-grey;

									&>text {
										margin: 0 10rpx;
									}

									.appoint-num {
										font-size: 30rpx;
										font-weight: 600;
									}

									.yellow {
										color: #FDB42E;
									}

									.total-num {
										color: #CCCCCC;
									}
								}
							}

							.right {
								.btn {
									width: 185rpx;
									height: 72rpx;
									text-align: center;
									line-height: 68rpx;
									border-radius: 36rpx;
									border: 2rpx solid transparent;

									&.sure {
										border-color: $public-color-blue1;
										color: $public-color-blue1;
									}

									&.cancel {
										border-color: #E7E7E7;
										color: $text-color-grey;
									}

									&.red {
										color: #FF0000;
									}
								}
							}

							.checked {
								position: absolute;
								width: 128rpx;
								height: 128rpx;
								left: 180rpx;
								top: 50%;
								margin-top: -64rpx;
							}
						}
					}
				}
			}
		}

		.appoint-item {
			padding: 0 30rpx;

			.list-item {
				padding: 20rpx 0 30rpx;

				.main-info {
					align-items: center;

					.info-left {
						width: 122rpx;
						height: 122rpx;
						position: relative;
						padding: 2rpx;
						margin-right: 15rpx;
						border: 4rpx solid $public-color-yellow1;
						border-radius: 50%;

						.coach-icon {
							width: 110rpx;
							height: 110rpx;
							vertical-align: middle;
							border-radius: 50%;
						}

						.gold-icon {
							width: 48rpx;
							height: 48rpx;
							position: absolute;
							right: -10rpx;
							top: -10rpx;
						}
					}

					.info-right {
						flex: 1 0 auto;
						position: relative;

						.title-row {
							align-items: center;
							margin-bottom: 5rpx;

							.coach-name {
								font-size: 34rpx;
							}

							.appoint-status {
								color: $public-color-yellow1;
								font-size: 26rpx;
							}
						}

						.content-row {
							font-size: 26rpx;
							color: $text-color-grey;
							display: flex;
							align-items: center;
							text{
								margin-right: 10rpx;
								&.red{
									color:#FF0000;
								}
							}
						}

						.btn {
							position: absolute;
							right: 0;
							bottom: 0;
							width: 125rpx;
							height: 43rpx;
							font-size: 24rpx;
							line-height: 43rpx;
							background: #6BA9FE;
							border-radius: 6rpx;
							color: #FFFFFF;
							text-align: center;

							&.cancel {
								background-color: #BABABA;
							}
						}
					}
				}
			}

		}

		.fixed-bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: white;
			min-height: 108rpx;
			padding: 10rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			// border-top: 1px solid #f2f2f2;
			// padding-bottom: constant(safe-area-inset-bottom);
			// padding-bottom: env(safe-area-inset-bottom);
			.appoint-btn {
				width: 243rpx;
				height: 78rpx;
				border: 2rpx solid $public-color-blue1;
				border-radius: 39rpx;
				line-height: 74rpx;
				text-align: center;
				color: $public-color-blue1;
				font-size: 32rpx;
			}
		}
	}
</style>
<style lang="scss">
	.uni-calendar__box {
		.uni-calendar__weeks:nth-child(3) {
			height: 100rpx !important;
		}
	}

	.uni-calendar__backtoday {
		display: none !important;
	}

	.uni-calendar-item--disable {
		/* visibility: hidden!important; */
		display: none !important;
	}
	
	.van-dialog__header{
		padding-left: 15rpx!important;
		padding-right: 15rpx!important;
	}
	.van-dialog__message{
		padding-left: 40rpx!important;
		padding-right: 40rpx!important;
	}
</style>
